<template>
	<v-content full ref="content" background="#f5f7fa" padding-top="50" padding-bottom="150">
		<v-header back title="在线考试" background="#fff" shadow="2"></v-header>
		<div class="main">
			<div class="title">{{ message.examName }}</div>

			<div class="flag">
				<span>{{ message.score }}</span>
				<image class="image" v-if="message.score >= (message.qualifiedScore || 0)"
					src="/static/image/exam/result-success.png"></image>
				<image class="image" v-else src="/static/image/exam/result-fail.png"></image>
			</div>
			<div class="message">
				<div class="message-item">
					<div class="tip">答题用时</div>
					<div class="time">{{ timeConsuming }}分钟</div>
					<div class="tag" :class="{ 'tag-success': timeConsuming < 60, 'tag-warning': timeConsuming >= 60 }">
						{{ timeConsuming < 60 ? '速度很快' : '再接再厉' }} </div>
					</div>
					<div class="message-item">
						<div class="tip">本试卷平均分</div>
						<div class="time">{{ message.averageScore || 0 }}</div>
						<div class="tag" :class="{
							'tag-success': averageScore === '高于平均分',
							'tag-warning': averageScore === '低于平均分',
							'tag-info': averageScore === '与平均分相同'
						}">
							{{ averageScore }}
						</div>
					</div>
				</div>

				<!-- AI分析板块 -->
				<div class="ai-analysis">
					<div class="analysis-title">
						<span class="ai-title-text">AI智能分析</span>
					</div>
					<div class="analysis-content">
						<div class="analysis-item">
							<div class="analysis-label">掌握程度</div>
							<div class="analysis-value" :class="getMasteryClass()">{{ masteryLevel }}%</div>
							<div class="progress-bar">
								<div class="progress-fill" :class="getMasteryClass()"
									:style="{ width: masteryLevel + '%' }"></div>
							</div>
						</div>
						<div class="analysis-item">
							<div class="analysis-label">薄弱环节</div>
							<div class="weak-points">
								<span v-for="(point, index) in weakPoints" :key="index" class="weak-tag">{{ point
								}}</span>
							</div>
						</div>
						<div class="analysis-suggestion">
							<div class="suggestion-title">学习建议</div>
							<div class="suggestion-content">{{ studySuggestion || '正在生成学习建议...' }}</div>
						</div>
					</div>
				</div>

				<div class="answer" :class="[
					{
						noAnswer: !message.showAnswer,
					},
				]
					">
					<answer-card ref="AnswerCardRef" type="answer" @on-click="onAnswerClick"></answer-card>
				</div>
			</div>
			<div class="footer">
				<div class="item" @click="onAnswerClick(1)" v-if="message.showAnswer" hover-class="footer-item-hover">
					<image class="icon" src="/static/image/icon-form.png"></image>
					查看试卷
				</div>
				<div class="item" @click="onRefresh(1)" v-else hover-class="footer-item-hover">
					<image class="icon" src="/static/image/icon-form.png"></image>
					查看试卷
				</div>
			</div>
	</v-content>
</template>

<script>
import mixins from "@/mixins"
import answerCard from "./components/answer-card.vue"

export default {
	name: "exam-result",
	mixins: [mixins],
	data() {
		return {
			// 这里可以根据实际API返回的数据来替换
			masteryLevel: 0,
			weakPoints: [],
			studySuggestion: ''
		}
	},
	computed: {
		message() {
			return this.$store.state.exam.message
		},
		current: {
			get() {
				return this.$store.state.exam.current + 1
			},
			set(value) {
				this.$store.commit("exam/setCurrent", value - 1)
			},
		},
		timeConsuming() {
			return Math.ceil(this.message.timeConsuming / 60)
		},

		averageScore() {
			const score = this.message.averageScore - this.message.score
			if (score > 0) {
				return `低于平均分`
			} else if (score < 0) {
				return `高于平均分`
			} else {
				return "与平均分相同"
			}
		},
	},
	methods: {
		onshow() {
			this.getMessage()
		},
		getMessage() {
			this.$store.dispatch("exam/getExam", {
				id: this.query.id,
				type: "finish",
			})
		},
		onAnswerClick(index) {
			this.current = index
			this.toPage("/pages/exam/viewAnswer", { id: this.query.id })
		},
		onRefresh(index) {
			this.current = index
			this.toPage("/pages/exam/view", { id: this.query.id })
		},
		getMasteryClass() {
			if (this.masteryLevel >= 80) return 'mastery-excellent';
			if (this.masteryLevel >= 60) return 'mastery-good';
			if (this.masteryLevel >= 40) return 'mastery-fair';
			return 'mastery-poor';
		},
		// 获取AI分析数据的方法
		async onGetAIAnalysis() {
			try {
				// 调用API获取真实的AI分析数据
				const res = await this.$axios.get(`/ai/xft/memberExam/analyze/${this.query.id}`)
				console.log(res);

				if (res) {
					// 掌握程度可以根据分数计算，例如满分100的情况下，分数就是掌握程度
					this.masteryLevel = this.message.score || 0
					// 设置薄弱环节
					this.weakPoints = res.list.length == 0 ? ['无'] : res.list
					// 设置学习建议
					this.studySuggestion = res.advice || '暂无学习建议'
				}
			} catch (error) {
				console.error('获取AI分析数据失败:', error)
			}
		},
	},
	components: {
		answerCard,
	},
	mounted() {
		// 组件挂载后调用获取AI分析数据的方法
		this.onGetAIAnalysis()
	},
}
</script>

<style lang="scss" scoped>
.main {
	margin: 5rpx auto;
	background: #fff;
	border-radius: 24rpx;
	width: 690rpx;
	padding: 50rpx 40rpx;
	box-sizing: border-box;
	position: relative;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);

	&::before {
		content: "";
		position: absolute;
		z-index: 2;
		width: 98rpx;
		height: 126rpx;
		background: url("@/static/image/exam/icon-pencil.png") no-repeat top center / contain;
		top: 355rpx;
		right: -46rpx;
		animation: bounce 2s ease-in-out infinite;
	}

	.title {
		font-size: 38rpx;
		font-weight: 600;
		color: #333;
		padding-bottom: 40rpx;
		text-align: center;
		line-height: 1.4;
	}

	.flag {
		position: relative;
		font-size: 87rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;

		span {
			position: absolute;
			top: 26%;
			z-index: 2;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 3em;
			font-weight: 700;
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}

		.image {
			width: 400rpx;
			height: 325rpx;
			transition: transform 0.3s ease;
		}

		&:hover .image {
			transform: scale(1.03);
		}
	}

	.message {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 40rpx;

		.message-item {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 50%;

			.tip {
				padding-bottom: 20rpx;
				font-size: 25rpx;
				color: #898989;
			}

			.time {
				padding-bottom: 20rpx;
				font-size: 37rpx;
				color: #3f435a;
				font-weight: 700;
				animation: fadeIn 0.8s ease-in-out;
			}

			.tag {
				position: relative;
				line-height: 1.5;
				padding: 6rpx 30rpx;
				border-radius: 20rpx;
				background-color: #f0f2f1;
				color: #999999;
				font-size: 24rpx;
				transition: all 0.3s ease;

				&::before {
					position: absolute;
					top: -10rpx;
					left: 50%;
					transform: translateX(-50%);
					content: "";
					display: inline-block;
					line-height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-bottom: 10rpx solid #f0f2f1;
				}

				&.tag-success {
					background-color: #e6f7ff;
					color: #1890ff;

					&::before {
						border-bottom-color: #e6f7ff;
					}
				}

				&.tag-warning {
					background-color: #fff7e6;
					color: #fa8c16;

					&::before {
						border-bottom-color: #fff7e6;
					}
				}

				&.tag-info {
					background-color: #f0f0f0;
					color: #666;

					&::before {
						border-bottom-color: #f0f0f0;
					}
				}

				&:hover {
					transform: translateY(-2rpx);
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				}
			}

			&:first-child {
				&::after {
					position: absolute;
					top: 20rpx;
					right: 0rpx;
					content: "";
					display: inline-block;
					width: 2rpx;
					height: 100rpx;
					background-color: #e9e9e9;
				}
			}
		}
	}

	/* AI分析板块样式 */
	.ai-analysis {
		margin-top: 40rpx;
		padding: 30rpx;
		background-color: #f9f9f9;
		border-radius: 15rpx;
		border-left: 8rpx solid #4158d0;
		transition: transform 0.3s ease;

		&:hover {
			transform: translateX(8rpx);
		}

		.analysis-title {
			display: flex;
			align-items: center;
			margin-bottom: 25rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
		}

		.ai-title-text {
			// 渐变色文字效果
			background: linear-gradient(135deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;
			// 文字阴影
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			// 稍微增加字体大小
			font-size: 32rpx;
			// 添加微妙的动画效果
			animation: glow 2s ease-in-out infinite alternate;
		}

		// 定义文字发光动画
		@keyframes glow {
			from {
				text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			to {
				text-shadow: 0 0 10rpx rgba(255, 204, 112, 0.7), 0 0 20rpx rgba(255, 204, 112, 0.5);
			}
		}

		.analysis-content {
			.analysis-item {
				margin-bottom: 25rpx;

				.analysis-label {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 15rpx;
					font-weight: 500;
				}

				.analysis-value {
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
					transition: color 0.3s ease;

					&.mastery-excellent {
						color: #52c41a;
					}

					&.mastery-good {
						color: #1890ff;
					}

					&.mastery-fair {
						color: #fa8c16;
					}

					&.mastery-poor {
						color: #ff4d4f;
					}
				}

				.progress-bar {
					height: 16rpx;
					background-color: #e0e0e0;
					border-radius: 8rpx;
					overflow: hidden;
					box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

					.progress-fill {
						height: 100%;
						background: linear-gradient(90deg, #ff6b35 0%, #ff9a6a 100%);
						border-radius: 8rpx;
						transition: width 0.8s ease, background 0.3s ease;
						position: relative;

						&::after {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
							animation: shimmer 2s infinite;
						}

						&.mastery-excellent {
							background: linear-gradient(90deg, #52c41a 0%, #95de64 100%);
						}

						&.mastery-good {
							background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
						}

						&.mastery-fair {
							background: linear-gradient(90deg, #fa8c16 0%, #ffa940 100%);
						}

						&.mastery-poor {
							background: linear-gradient(90deg, #ff4d4f 0%, #ff7a75 100%);
						}
					}
				}

				.weak-points {
					display: flex;
					flex-wrap: wrap;
					gap: 15rpx;

					.weak-tag {
						display: inline-block;
						padding: 8rpx 24rpx;
						background-color: #fff1f0;
						color: #ff4d4f;
						font-size: 24rpx;
						border-radius: 20rpx;
						transition: all 0.3s ease;
						box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.1);

						&:hover {
							transform: translateY(-2rpx);
							background-color: #fff2f0;
							box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.15);
						}
					}
				}
			}

			.analysis-suggestion {
				border-top: 2rpx solid #e0e0e0;
				padding-top: 20rpx;

				.suggestion-title {
					font-size: 26rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 15rpx;
				}

				.suggestion-content {
					font-size: 24rpx;
					line-height: 1.7;
					color: #666;
					text-align: justify;
					background-color: #fff;
					padding: 20rpx;
					border-radius: 12rpx;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				}
			}
		}
	}

	.answer {
		margin-top: 40rpx;

		&.noAnswer {
			pointer-events: none;
		}
	}
}

.footer {
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;

	width: 750rpx;
	height: 125rpx;
	background-color: #ffffff;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);

	.item {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #663527;
		font-size: 34rpx;
		font-weight: 500;
		transition: all 0.3s ease;

		&:first-child {
			padding-right: 89rpx;

			&::after {
				position: absolute;
				right: 0rpx;
				content: "";
				display: inline-block;
				width: 2rpx;
				height: 56rpx;
				background-color: #eee;
			}
		}

		&:last-child {
			padding-left: 89rpx;

			&::after {
				display: none;
			}
		}

		image {
			margin-right: 10rpx;
			width: 33rpx;
			height: 33rpx;
			transition: transform 0.3s ease;
		}

		&.footer-item-hover {
			color: #ff6b35;

			image {
				transform: scale(1.1);
			}
		}
	}
}

// 新增动画效果
@keyframes float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8rpx);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-15rpx);
	}

	60% {
		transform: translateY(-10rpx);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10rpx);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}
</style>